<template>
  <div>
    <van-nav-bar
      fixed
      title="进件管理"
      left-arrow
      right-text="申请进件"
      @click-left="$utils.back($route.path);"
      @click-right="onClickRight"
    />
    <div class="has-top">
      <ul>
        <li
          v-for="item in list"
          :key="item.number"
          class="item flex-s-c mlr-30 pb-30"
          @click="goPage(item.Status)"
        >
          <div class="item-box pd-50 bg-white br-10 flex flex-s-c">
            <div class="content pr-25">
              <h1 class="color-dark block-center">
                <img class :src="item.imgUrl" />
                {{ item.title }}
              </h1>
            </div>
            <div class="more tac" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetMerchantApplyCount, GetMerchantApplyList } from 'api/merchantPaper'
export default {
  components: {},
  data() {
    return {
      list: [
        {
          title: '待进件草稿箱(0）',
          imgUrl: require('@/assets/images/drafts.png'),
          Status: 1
        },
        {
          title: '正在审核中(0）',
          imgUrl: require('@/assets/images/review.png'),
          Status: 2
        },
        {
          title: '审核不通过(0）',
          imgUrl: require('@/assets/images/refuse.png'),
          Status: 3
        },
        {
          title: '待签约(0）',
          imgUrl: require('@/assets/images/sign.png'),
          Status: 5
        },
        {
          title: '已完成(0)',
          imgUrl: require('@/assets/images/done.png'),
          Status: 7
        }
      ]
    }
  },
  created() {
    this.GetMerchantApplyCount()
  },
  methods: {
    GetMerchantApplyCount() {
      let list = this.list
      GetMerchantApplyCount().then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              switch (tem.Status) {
                case 1:
                  list[0].title = '待进件草稿箱（' + tem.Count + '）'
                  break
                case 2:
                  list[1].title = '正在审核中（' + tem.Count + '）'
                  break
                case 3:
                  list[2].title = '审核不通过（' + tem.Count + '）'
                  break
                case 5:
                  list[3].title = '待签约（' + tem.Count + '）'
                  break
                case 7:
                  list[4].title = '已完成（' + tem.Count + '）'
                  break
                default:
                  break
              }
            })
          }
        }
      })
    },
    goPage(Status) {
      this.$router.push({
        path: '/paperManage/list/' + Status
      })
    },
    onClickRight() {
      this.$router.push('/merchantPaper')
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  &:first-child {
    padding-top: 30px;
  }
  .item-box {
    width: 100%;
    .content {
      h1 {
        font-size: 30px;
      }
      img {
        width: 40px;
        height: 40px;
        align-items: center;
      }
    }
    .more {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      background: $colorBorder;
      line-height: 40px;
      position: relative;
      &:after {
        display: inline-block;
        height: 30%;
        width: 30%;
        overflow: hidden;
        content: '';
        position: absolute;
        border-top: 1px solid $color6;
        border-right: 1px solid $color6;
        transform: rotate(45deg);
        right: 40%;
        top: 35%;
      }
    }
  }
}
</style>
